import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import { hover } from '@testing-library/user-event/dist/hover';
function Mycharts(props) {
    console.log(props);
    useEffect(() => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: props.list
            },
            yAxis: {
                type: 'value',

            },

            series: [
                {
                    data: props.arrlist,
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            // x: 0,
                            // y: 0,
                            // x2: 0,
                            // y2: 1,
                            colorStops: [  // 渐变颜色
                                {
                                    offset: 0,
                                    color: "lightskyblue",
                                },
                                {
                                    offset: 1,
                                    color: "lightskyblue",
                                },
                            ],
                            global: false,
                        },
                    },
                }

            ]
        };

        option && myChart.setOption(option);
    })

    return (

        <div id='main' style={{ width: 1200, height: 500 }}>
        </div>

    );
}

export default Mycharts;